<template>
  <div class="reg">
    <div class="login_div">
      <div class="login_box header">
        <div class="w">
          <span class="gsmc">佰联管理后台</span>
          <span class="gstg">机械零部件行业营销推广</span>
        </div>
      </div>
      <div class="login_box content">
        <div class="content_box">
          <div class="login_con">
            <div class="bz">
              <div class="reg_box">
                <div class="yz">
                  <span class="inp_tit">手机</span>
               
                   <input
                      type="text"
                      maxlength="11"
                      onkeyup="value=value.replace(/[^\d]/g,'') "
                      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                      class="input"
                      v-model="phone"
                      placeholder="请输入手机号码"
                    />
                  <span class="form_yz" v-if="!phone">
                    <i>*</i> 必填
                  </span>
                </div>
                <div class="yz">
                  <span class="inp_tit">密码</span>
                  <input type="password" placeholder="请输入密码" v-model="password" />

                  <span class="form_yz" v-if="!password">
                    <i>*</i> 必填
                  </span>
                </div>
                <div class="yz yzm">
                  <span class="inp_tit">验证码</span>
                  <input
                    maxlength="6"
                    onkeyup="value=value.replace(/[^\d]/g,'') "
                    v-model="msgcode"
                    onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                    placeholder="请输入验证码"
                  />
                  <span class="code">
                    <a-button @click="getcode" :disabled="phone==''||password==''">获取验证码</a-button>
                    <span class="dateup" v-if="secflg">{{count}}后在尝试...</span>
                  </span>
                  <span class="form_yz" v-if="!msgcode">
                    <i>*</i> 必填
                  </span>
                </div>
              </div>
              <div class="steps-action sub">
                <a-button :disabled="phone==''||password==''||msgcode==''" type="primary" @click="register">免费注册</a-button>
                <div class="dl">
                  已有账号？
                  <router-link to="/login">直接登录</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="login_box footer">
        <div class="fot_tit">西安佰联网络技术有限公司 Copyright 佰联轴承网 陕ICP备12004210号-2</div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      current: 0,
      phone: "",
      password: "",
      msgcode: "",
      membercount: "",
      secflg: false,
      count: "",
      timer: null,
      reg:false
    };
  },
  methods: {
    getcode() {
    
      this.axios
        .post(
          "login/GetCode.php",
          qs.stringify({
            account: this.phone,
            login_type: 0
          })
        )
        .then(res => {
 
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            const time_count = 60;
            if (!this.timer) {
              this.count = time_count;
              this.secflg = true;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= time_count) {
                  this.count--;
                } else {
                  this.secflg = false;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$notification["error"]({
              message: "警告",
              description: res.data.msg
            });
          }
        });
    },
    register() {
      if (this.phone != "" && this.password != "") {
        if (this.msgCode == this.code) {
          this.axios
            .post(
              "login/register.php",
              qs.stringify({
                account: this.phone,
                passWord: this.password,
                code: this.msgcode,
                membercount: this.membercount
              })
            )
            .then(res => {
          
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
              } else {
                this.$notification["error"]({
                  message: "警告",
                  description: res.data.msg
                });
              }
            });
        } else {
          this.$notification["error"]({
            message: "警告",
            description: "验证码不正确"
          });
        }
      }else{
           this.$notification["error"]({
            message: "警告",
            description: "手机号码或密码不能为空！！！"
          });
        }
    }
  },
  created() {
    this.membercount = this.$route.query.membercount;
  
  }
};
</script>

<style lang='less' >
.steps-content {
  margin-top: 16px;
  border-radius: 6px;
  min-height: 200px;
  text-align: center;
  padding-top: 60px;
  text-align: left;
}

.steps-action {
  margin-top: 24px;
}
.reg {
  position: relative;
  z-index: 999;
  height: auto;
  width: 100%;
  .login_div {
    height: 100%;

    .content {
      background-color: #f3f7f9;
      height: 720px;
      overflow: hidden;
      .content_box {
        position: relative;
        width: 920px;
        height: 485px;
        background-color: #fff;
        margin: 80px auto;
        text-align: left;
        .login_con {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 100%;
          border-top: 2px solid #0076fe;
          .reg_box {
            width: 60%;
            margin: 80px auto;
            .yz {
              width: 100%;
              margin-bottom: 30px;
              .inp_tit {
                margin: 0 20px;
              }
              .form_yz {
                color: red;
                i {
                  margin: 0 10px;
                }
              }
              input {
                width: 55%;
                border: 0 !important;
                outline: none;
                color: #000;
                padding: 10px;
                font-size: 14px;
                border-bottom: 1px solid #ccc !important;
                //   border-bottom: 1px solid #0076fe!important;
              }
              .inp_tit {
                display: inline-block;
                width: 17%;
                text-align: right;
              }
              .check {
                width: 53%;
                margin: 15px auto;
              }
            }
            .yzm {
              margin: 50px 0;
              input {
                width: 33%;
                margin-right: 20px;
              }
              .code {
                position: relative;
                .dateup {
                  position: absolute;
                  top: -7px;
                  left: 1px;
                  display: inline-block;
                  width: 100px;
                  height: 29px;
                  background: rgba(255, 255, 255, 0.8);
                  text-align: center;
                  line-height: 29px;
                }
              }
            }
          }

          .sub {
            position: absolute;
            width: 100%;
            left: 30%;
            bottom: 30px;
            button {
              width: 40%;
              height: 64px;
              background-color: #0076fe;
              color: #fff;
            }
            .dl {
              width: 40%;
              margin-top: 20px;
              text-align: center;
            }
          }
        }
      }
    }
    .footer {
      position: relative;
      width: 100%;
      background-color: #f3f7f9;
      height: 150px;
      .fot_tit {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        color: #999;
      }
    }
  }
}
</style>
